<template>
  <div class="payment-failed">
    <el-container>
      <el-main>
        <div class="failed-content">
          <div class="failed-icon">
            <el-icon size="120" color="#f56c6c">
              <CircleCloseFilled />
            </el-icon>
          </div>

          <h1 class="failed-title">支付失败</h1>
          <p class="failed-message">很抱歉，您的支付未能成功完成。请检查支付信息后重试</p>

          <div class="error-info">
            <el-card class="error-card">
              <template #header>
                <span>错误信息</span>
              </template>
              <el-descriptions :column="1" border>
                <el-descriptions-item label="订单号">
                  {{ orderInfo.orderNumber }}
                </el-descriptions-item>
                <el-descriptions-item label="支付金额">
                  <span class="amount">¥{{ orderInfo.amount }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="失败原因">
                  <span class="error-reason">{{ orderInfo.failReason }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="失败时间">
                  {{ formatDate(orderInfo.failTime) }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </div>

          <div class="failed-actions">
            <el-button type="primary" size="large" @click="retryPayment"> 重新支付 </el-button>
            <el-button size="large" @click="viewOrder"> 查看订单 </el-button>
            <el-button size="large" @click="contactSupport"> 联系客服 </el-button>
          </div>

          <div class="troubleshooting">
            <h3>常见问题解决方案：</h3>
            <el-collapse v-model="activeNames">
              <el-collapse-item title="银行卡支付失败" name="1">
                <div class="collapse-content">
                  <p>1. 检查银行卡余额是否充足</p>
                  <p>2. 确认银行卡是否已开通网上支付功能</p>
                  <p>3. 检查银行卡有效期和CVV码是否正确</p>
                  <p>4. 联系发卡行确认是否有支付限制</p>
                </div>
              </el-collapse-item>
              <el-collapse-item title="支付宝/微信支付失败" name="2">
                <div class="collapse-content">
                  <p>1. 检查账户余额是否充足</p>
                  <p>2. 确认是否已实名认证</p>
                  <p>3. 检查支付密码是否正确</p>
                  <p>4. 尝试重新登录支付应用</p>
                </div>
              </el-collapse-item>
              <el-collapse-item title="网络问题" name="3">
                <div class="collapse-content">
                  <p>1. 检查网络连接是否稳定</p>
                  <p>2. 尝试刷新页面重新支付</p>
                  <p>3. 更换网络环境后重试</p>
                  <p>4. 清除浏览器缓存后重试</p>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { CircleCloseFilled } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 响应式数据
const orderInfo = ref({
  orderNumber: '',
  amount: 0,
  failReason: '',
  failTime: new Date(),
})

const activeNames = ref(['1'])

// 方法
const loadOrderInfo = () => {
  // 从路由参数或查询参数中获取订单信息
  const orderId = route.query.orderId
  const amount = route.query.amount
  const reason = route.query.reason

  if (orderId) {
    orderInfo.value.orderNumber = `ORD${orderId}`
  }

  if (amount) {
    orderInfo.value.amount = Number(amount)
  }

  // 设置失败原因（可以从路由参数获取）
  orderInfo.value.failReason = (reason as string) || '支付超时或网络异常'
  orderInfo.value.failTime = new Date()
}

const formatDate = (date: Date) => {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  })
}

const retryPayment = () => {
  const orderId = route.query.orderId
  if (orderId) {
    router.push({
      path: '/payment',
      query: { orderId }
    })
  } else {
    router.push('/payment')
  }
}

const viewOrder = () => {
  const orderId = route.query.orderId
  if (orderId) {
    router.push(`/order/${orderId}`)
  } else {
    router.push('/orders')
  }
}

const contactSupport = () => {
  // 可以跳转到客服页面或打开客服对话框
  ElMessage.info('正在为您连接客服...')
}

// 组件挂载时加载数据
onMounted(() => {
  loadOrderInfo()
})
</script>

<style scoped>
.payment-failed {
  min-height: calc(100vh - 64px);
  background-color: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.failed-content {
  text-align: center;
  max-width: 800px;
  padding: 40px 20px;
}

.failed-icon {
  margin-bottom: 24px;
}

.failed-title {
  font-size: 36px;
  font-weight: 700;
  color: #f56c6c;
  margin: 0 0 16px 0;
}

.failed-message {
  font-size: 18px;
  color: #606266;
  margin: 0 0 32px 0;
  line-height: 1.6;
}

.error-info {
  margin-bottom: 32px;
}

.error-card {
  max-width: 600px;
  margin: 0 auto;
}

.amount {
  font-size: 18px;
  font-weight: 600;
  color: #e6a23c;
}

.error-reason {
  color: #f56c6c;
  font-weight: 500;
}

.failed-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.troubleshooting {
  text-align: left;
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.troubleshooting h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 16px 0;
  text-align: center;
}

.collapse-content {
  padding: 16px 0;
}

.collapse-content p {
  margin: 8px 0;
  color: #606266;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .failed-title {
    font-size: 28px;
  }

  .failed-actions {
    flex-direction: column;
    align-items: center;
  }

  .failed-actions .el-button {
    width: 200px;
  }
}
</style>
